<style scoped>
.question-cell {
  padding-top: 10px;
}
.input-item {
  margin-left: 45px;
  width: 250px;
}

.input-item2 {
  margin-left: 45px;
  width: 275px;
}

.formitem {
  margin-left: 30px;
}
</style>
<template>
  <div class="question-cell">
    <Form
      ref="formData"
      :model="formValidate"
      :rules="ruleValidate"
      inline
    >
      <FormItem
        label="标题"
        :label-width="100"
        prop="title"
      >
        <Input
          class="input-item"
          placeholder="输入标题"
          v-model="formValidate.title"
        ></Input>
      </FormItem>
      <FormItem
        label="跳转至"
        :label-width="100"
        prop="title"
      >
        <Goto
          v-model="formValidate.goto"
          :list="list"
          :except="sort"
        />
      </FormItem>
      <!-- 			<FormItem label="说明描述" :label-width="100" class="formitem" prop="memo">
				<Input class="input-item2" placeholder="输入说明描述" v-model="formValidate.memo"></Input>
			</FormItem>    -->
    </Form>
  </div>
</template>
<script>
import Goto from './goto'
export default {
    props: {
        title: String,
        memo: String,
				goto: String,
				list: Array,
        sort: String
    },
    data() {
        return {
            formValidate: {
            	title: '',
							memo: '',
							goto: ''
            },
            ruleValidate: {
            	title: [{
								required: true,
								message: '标题不能为空',
								trigger: 'blur'
							}],
							memo: [{
								required: false,
								message: '说明不能为空',
								trigger: 'blur'
							}],
            },
        }
    },
		components: {
			Goto
		},
    watch: {
		title: function (newValue, oldValue) {
      this.formValidate.title = newValue
		},
		memo: function (newValue, oldValue) {
			this.formValidate.memo = newValue
		},
    goto: function(newValue, oldValue) {
      this.formValidate.goto = newValue
    },
		formValidate: {
			handler(newValue, oldValue) {
				if (newValue.title != this.title) {
          this.$emit('update:title', newValue.title)
				}
				if (newValue.memo != this.memo) {
          this.$emit('update:memo', newValue.memo)
				}
        if (newValue.goto != this.goto) {
          this.$emit('update:goto', newValue.goto)
				}
			},
			deep: true
		},
	},
	created() {
		this.formValidate.title = this.title
		this.formValidate.memo = this.memo
		this.formValidate.goto = this.goto
    console.log(this.sort)
	},
    methods: {

    }
};
</script>
